<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="" class="container">
        <!-- 账号 -->
        <div class="row mb-4 form-group">
            <span class="iconfont icon-yonghu"></span>
            <input type="text" class="form-control" name="username" />
        </div>
        <!-- 密码 -->
        <div class="row mb-4 form-group">
            <span class="iconfont icon-mima"></span>
            <input type="password" class="form-control" name="password" />
        </div>
        <div class="row mb-4">
            <button type="submit" class="btn btn-primary">注册</button>
        </div>
        <div class="row mb-3">
            <a href="javascript:;">已有账号，去登录</a>
        </div>
    </form>
    <link rel="stylesheet" href="./assets/lib/toastr/toastr.min.css">
    <link rel="stylesheet" href="./assets/lib/validator/bootstrapValidator.min.css">
    <script src="./assets/lib/bootstrap/bootstrap.min.js"></script>
    <script src="./assets/lib/jquery-3.6.0.min.js"></script>
    <script src="./assets/lib/validator/bootstrapValidator.min.js"></script>
    <script src="./assets/lib/toastr/toastr.min.js"></script>
    <script>
        toastr.options = {
            "positionClass": "toast-center-center", // 提示框位置，这里填类名
            "showDuration": "300",              // 提示框渐显所用时间
            "hideDuration": "300",              // 提示框隐藏渐隐时间
            "timeOut": "2000",                  // 提示框持续时间
        }
        function text() {
            return {
                fields: {
                    username: {
                        validators: {
                            notEmpty: {   //不能为空
                                message: '用户名不能为空.'
                            },
                            stringLength: {
                                min: 2,
                                max: 16,
                                message: '用户名长度不能小于6位或超过16位'
                            },
                        },

                    },
                    password: {
                        validators: {
                            notEmpty: {   //不能为空
                                message: '密码不能为空.'
                            },
                            stringLength: {
                                min: 6,
                                max: 16,
                                message: '密码长度不能小于6位或超过16位'
                            },
                        },

                    }
                }
            }
        }
        $('form').bootstrapValidator(text()).on('success.form.bv', function (e) {
            e.preventDefault()
            console.log(11);
            toastr.info('提示信息');                // 普通提示
            // toastr.success('提示信息');             // 成功提示
            // toastr.warning('提示信息');             // 警告提示
            // toastr.error('提示信息');               // 错误提示
        })

    </script>
</body>

</html>